<template>
    <div>
        <Header/>
        <Search/>
        <List :cities="cities" :hot="hotCities"/>
        <Alphabet :cities="cities"/>
    </div>
</template>
<script>
    import Header from './city/Header.vue';
    import Search from './city/Search.vue';
    import List from './city/List.vue';
    import Alphabet from './city/Alphabet.vue';
    import axios from 'axios';
    export default {
        name:"MyCity",
        data(){
            return {
                cities:{},
                hotCities:[]
            }
        },
        methods:{
            getCityInfo() {
                axios.get("/mock/city.json")
                    .then(this.handleGetCityInfoSucc);
            },
            handleGetCityInfoSucc(res) {
                console.log(res);
                res = res.data
                if(res.ret && res.data) {
                    const data = res.data;
                    this.cities = data.cities;
                    this.hotCities = data.hotCities;
                }
            }
        },
        mounted(){
            this.getCityInfo()
        },
        components:{Header, Search,List,Alphabet}
    }
</script>
<style scoped>
    
</style>

